import styles from '@/styles/roleList.module.less'
import { Button, Form, Input, Space, Table, TableProps } from 'antd'
import { listArrayTYPE, listItemTYPE, TypeEditRoleAPI, TypeSearchInfoAPI } from '../../type/api'
import { getRoleListAPI, deleteRoleListAPI } from '../../api/roleListApi'
import { useEffect, useRef, useState } from 'react'
import { useAntdTable } from 'ahooks'
import CreateRole from './createRole'
import Permission from './permission'
function RoleList() {
  //存储获取到的列表，渲染Table
  const [data, setData] = useState<listArrayTYPE>([])
  //获取＋查询功能
  async function getRoleListAPIFun(
    { current, pageSize }: { current: number; pageSize: number },
    formData: TypeSearchInfoAPI
  ) {
    const res = await getRoleListAPI({ ...formData, pageNum: current, pageSize })

    return {
      list: res.list,
      total: res.page.total
    }
  }
  // //调用第一次获取数据
  // useEffect(() => {
  //   getRoleListAPIFun()
  // }, [])
  //表单实例
  const [form] = Form.useForm()
  //使用useAntdTable
  const { tableProps, search } = useAntdTable(getRoleListAPIFun, {
    form,
    defaultPageSize: 11
  })

  //给Table组件的数据

  //接受子组件的ref，用于控制子组件的显示隐藏等操作
  //存储子组件的实例
  const mValue = useRef<{
    showModal: (type: string, data?: listItemTYPE | undefined) => void
  }>()
  const perValue = useRef<{
    showModal: (data: listItemTYPE) => void
  }>()
  //Table的列配置
  const columns: TableProps<listItemTYPE>['columns'] = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName'
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      key: 'remark'
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => {
        return (
          <div>
            <Button onClick={() => mValue.current?.showModal('edit', record)}>编辑</Button>
            <Button onClick={() => perValue.current?.showModal(record)}>修改权限</Button>
            <Button onClick={async () => await deleteRoleListAPI({ _id: record._id })}>删除</Button>
          </div>
        )
      }
    }
  ]
  return (
    <div>
      <Form name='base' form={form} layout='inline'>
        <Form.Item label='角色名称' name='roleName'>
          <Space>
            <Input placeholder='请输入角色名称'></Input>
            <Button type='primary' onClick={() => search.submit()}>
              查询
            </Button>
            <Button onClick={() => search.reset()}>重置</Button>
          </Space>
        </Form.Item>
        <Form.Item name='hhh'>
          <Input></Input>
        </Form.Item>
        <Form.Item style={{ marginLeft: '400px' }}>
          <Button type='primary' onClick={() => mValue.current?.showModal('create')}>
            新增
          </Button>
        </Form.Item>
      </Form>
      <Table {...tableProps} rowKey='_id' columns={columns} />;
      <CreateRole mref={mValue} getRoleListFn={() => search.submit()}></CreateRole>
      <Permission mref={perValue}></Permission>
    </div>
  )
}

export default RoleList
